import { NavBar, DatePicker } from "antd-mobile";
import "./year.scss";
import { useEffect, useMemo, useState } from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import _ from "loadsh";
import DailyBill from "./MonthDay/daybill";

const Year = () => {
  const [dateVisible, setDateVisible] = useState(false);
  const billList = useSelector((state) => state.bill.list);
  const [currentdate, setcurrentdate] = useState(() => {
    return dayjs().format("YYYY");
  });
  const [currentDataList, setcurrentDataList] = useState([]);
  // 相当于computed  按照年份分组
  const YearGroup = useMemo(() => {
    const temp = _.groupBy(billList, (item) => dayjs(item.date).format("YYYY"));
    return temp;
  }, [billList]);
  useEffect(() => {
    if (YearGroup[currentdate]) {
      setcurrentDataList(YearGroup[currentdate]);
    } else {
      setcurrentDataList([]);
    }
  }, [YearGroup, currentdate]);

  const yearResult = useMemo(() => {
    let pay = 0;
    let income = 0;
    if (currentDataList.length > 0) {
      currentDataList.forEach((item) => {
        if (item.type === "pay") {
          pay += item.money;
        } else if (item.type === "income") {
          income += item.money;
        }
      });
    }
    return {
      pay,
      income,
      total: pay + income,
    };
  }, [currentDataList]);

  const monthGroup = useMemo(() => {
    const temp = _.groupBy(currentDataList, (item) =>
      dayjs(item.date).format("YYYY-MM")
    );
    const keys=Object.keys(temp)
    return {
      temp,
      keys
    };
  }, [currentDataList]);
  console.log(monthGroup);

  const confirm = function (val) {
    setcurrentdate(dayjs(val).format("YYYY"));
  };
  return (
    <div className="monthlyBill">
      <NavBar className="nav" back={null}>
        年度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {dayjs(currentdate).format("YYYY")}年账单
            </span>
            <span
              className={classNames("arrow", { expand: dateVisible })}
            ></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{yearResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{yearResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{yearResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>

          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="year"
            visible={dateVisible}
            onCancel={() => setDateVisible(false)}
            onConfirm={confirm}
            onClose={() => setDateVisible(false)}
            max={new Date()}
          />
        </div>
        {/* 单月账单 */}
        {monthGroup.keys.map((item) => (
          <DailyBill key={item} date={item} list={monthGroup.temp[item]} />
        ))}
      </div>
    </div>
  );
};

export default Year;
